<!DOCTYPE html>
<html>
  <head>
    <title>BabyChrome Extension Options</title>
    <link rel="stylesheet" type="text/css" href="options_style.css">
    <script type="text/javascript">
        // Saves options to localStorage.
        function save_options() {
        	var select = document.getElementById("language_selector");
          	var language = select.children[select.selectedIndex].value;
          	localStorage["language"] = language;
			
          	// Update status to let user know options were saved.
          	var status = document.getElementById("status");
          	status.innerHTML = "Options Saved.";
          	setTimeout(function() {
                status.innerHTML = "";
          	  }, 3600);
        }

        // Restores select box state to saved value from localStorage.
        function restore_options() {
          var language = localStorage["language"];
          
          if (!language) {
            return;
          }
          
          var select = document.getElementById("language_selector");
          for (var i = 0; i < select.children.length; i++) {
            var child = select.children[i];
            if (child.value == language) {
              child.selected = "true";
              break;
            }
          }
        }
    </script>
  </head>
  <body onload="restore_options()">
    <div id="content">
      <h1>
        <img src='images/babychrome.png' title="Google Dictionary" alt="Google Dictionary"><br>
        <p>BabyChrome Extension Options</p>
      </h1>
	  <!-- Options form -->
      <form name="options_form" action="">
        <div class="option_row">
          <div class="option_name">Language:</div>
            <select id="language_selector">
                <option value="en">English</option>
                <option value="ar">Arabic</option>
                <option value="zhs">Chinese(S)</option>
                <option value="zht">Chinese(T)</option>
                <option value="nl">Dutch</option>
                <option value="fa">Farsi</option>
                <option value="fi">Finnish</option>
                <option value="fr">French</option>
                <option value="de">German</option>
                <option value="el">Greek</option>
                <option value="he">Hebrew</option>
                <option value="hu">Hungarian</option>
                <option value="it">Italian</option>
                <option value="ja">Japanese</option>
                <option value="ko">Korean</option>
                <option value="no">Norwegian</option>
                <option value="pl">Polish</option>
                <option value="pt">Portuguese</option>
                <option value="ro">Romanian</option>
                <option value="ru">Russian</option>
                <option value="es" selected>Spanish</option>
                <option value="sv">Swedish</option>
                <option value="th">Thai</option>
                <option value="tr">Turkish</option>
            </select>
        </div>

        <div class="option_row">
          <div class="option_name">Include Wikipedia:</div>
          <div class="option_picker">
            <input type="radio" name="use_wiki" value="n" id="wiki_yes" disabled>
            <label for="wiki_yes">Yes</label><br>
            <input type="radio" name="use_wiki" value="y" id="wiki_no" checked disabled>
            <label for="wiki_no">No</label><br>            
          </div>
        </div>
		<div class="buttons">
          <button id="save_button" onClick="save_options()">Save</button>
          <span id="status"></span>
        </div>      
 	  </form>		
    </div>
    <div class="footer"><p>Powered by <a href="www.babylon.com">Babylon Translator</a></p></div> 
  </body>
</html>




